import React from 'react'
import {Form,Checkbox,Button,Input} from 'antd'
import request from '@/utils/request'
import userAction from '@/store/actions/user'
import { withStore } from '../utils/hoc'
import {loginAsync} from "../store/actions/user"
function Login(props) {
    console.log('Login.props',props)
    const query = new URLSearchParams(props.location.search)
    const username = query.get('username')
    
    const rules = {
        username: [
            {
                required: true,
                message: '请输入用户名',
            },
        ],
        password:[
            {
                required: true,
                message: '请输入密码',
            },
        ]
    }
    const onFinish = function({username,password,remember}){
        // redux-thunk中间件写法
        // console.log("username",username);
        props.login({username,password,remember}).then(data=>{
            console.log('data=',data)
            if(data.code === 200){
                props.history.push('/manage')
            }
        })

    }
    return (
        <div style={{padding:20}}>
            <h1>豆瓣热门电视剧后台管理系统</h1>
            <Form
                name="basic"
                labelCol={{
                    span: 6,
                }}
                wrapperCol={{
                    span: 16,
                }}
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                autoComplete="off"
                style={{width:400,backgroundColor:'#666',margin:'0 auto',paddingTop:20,paddingBottom:20}}
            >
               
                <Form.Item
                    label="用户名"
                    name="username"
                    initialValue={username}
                    rules={ rules.username }
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={rules.password}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    name="remember"
                    valuePropName="checked"
                    wrapperCol={{
                        offset: 6,
                        span: 16,
                    }}
                >
                    <Checkbox>免登录</Checkbox>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        offset: 6,
                        span: 16,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}
Login = withStore(()=>{

},(dispatch)=>{
    return {
        dispatch,
        login(values){
            // return new Promise((resolve)=>{
            //     dispatch(loginAsync(values))

            // })
            return dispatch(userAction.loginAsync(values))
        }
    }
})(Login)
export default Login;